<template>
	<view class="content">
		<view class="goods-box">
			<!-- 商品列表 -->
			<view class="ld">
				<!-- 商品分类 -->
				<view class="left">
					<scroll-view :scroll-y="true" :scroll-with-animation="true" style="height: 100%;width: 100%;">
						<view v-for="(item, index) in navigationList" :key="index">
							<view :class="['title', { active: index === showImageIndex }]" @click="setId(index, item)">
								<view class="price">
									<view class="pricea">
										{{ item.name }}
									</view>
									<view class="plus" v-if="index == showImageIndex">
										<image src="../../static/325.png" mode="">
										</image>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<scroll-view v-if="classList" :scroll-with-animation="true" :scroll-y="true"
					style="height: 100%;width: 100%;">
					<view class="classListli">
						<view class="shop-wm-itembox " v-for="ite,inde in classList" :key="inde"
							@click="toshopinfos(ite.categoryId)">
							<image class="wm-leftimg " :src="ite.icon" mode=""></image>
							<view class="wm-rightbox">
								{{ite.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="img" v-else>
					<image src="../../static/389.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getGoodsCategory, //一级查询
		getSecondaryLevelChannel //二级分类
	} from "../../request/api.js"
	export default {
		data() {
			return {
				navigationList: [],
				classList: [],
				classIndex: 0,
				ids: '',
				className: '',
				qingqiuflag: false,
				// url: '',
				banner: [],
				showImageIndex: 0
			}
		},
		onLoad(options) {
			this.getcaidan()
		},
		onShow() {
			// this.bannerList()
			// this.classifyList = uni.getStorageSync('classifyList')
			// console.log(this.classifyList, 'id');
			// this.classifyList.forEach((item) => {
			// 	if (item.id == this.ids) {
			// 		this.className = item.name
			// 	}
			// })
			// console.log(getApp().globalData.type.id, 'id');
			// if (getApp().globalData.type.id) {
			// 	this.ids = getApp().globalData.type;
			// 	this.classIndex = getApp().globalData.type.index;
			// 	this.setId(this.classIndex, this.ids);
			// } else {
			// 	console.log('a');
			// 	this.setId(0, this.classifyList[0]);
			// }
			// console.log(getApp().globalData.url, 'zp');
			// this.url = getApp().globalData.url + '/'
			// this.getshoplist()
		},
		methods: {
			bannerList() {
				imagesCarousel().then(res => {
					this.banner = res.result
					console.log(res, '轮播图');
				})
			},
			// 获取页面的菜单
			getcaidan() {
				let that = this
				getGoodsCategory().then(responts => {
					console.log(responts, "获取菜单")
					if (responts.success) {
						that.navigationList = responts.result;
						this.classList = responts.result[0].children;
						// this.ids = that.navigationList[0].id;
						// uni.setStorageSync('classifyList', responts.result)
					}
				})
			},
			toshopinfos(id) {
				uni.navigateTo({
					url: '/pages/classification/shoppingmall?id=' + id
				})
			},
			// 选择分类
			setId(e, item) {
				this.classList = item.children;
				console.log(this.classList);
				this.showImageIndex = e;
			},
		}
	}
</script>
<style lang="scss" scoped>
	.sous {
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		background-color: #fff;
		align-items: center;
		border-radius: 24rpx;
		margin-top: 70rpx;

		.in {
			margin-left: 32rpx;
		}

		text {
			width: 120rpx;
			height: 80rpx;
			background-color: #0055B8;
			text-align: center;
			line-height: 80rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			border-radius: 24rpx;
			margin-right: 10rpx;
		}
	}

	.classListli {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.shop-wm-itembox {
			width: 25%;
			border-radius: 6rpx;
			background-color: #fff;
			margin: 20rpx 20rpx 0 20rpx;
			padding-top: 20rpx;
			text-align: center;

			.wm-leftimg {
				width: 160rpx;
				height: 160rpx;
				border-radius: 6rpx;
			}

			.wm-rightbox {
				// display: flex;
				// flex-direction: column;
			}
		}
	}

	.topstart {
		height: var(--status-bar-height);
	}

	.header {
		padding-top: 20rpx;
		text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}

	.banner {
		padding: 20rpx;
		height: 351rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-top: 0px;
		// background: linear-gradient(180deg, #E5F0FE 0%, #E5F1FF 40%, #FFFFFF 100%);
	}

	.goods-box {
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
	}

	.ld {
		display: flex;
		height: 100%;
		width: 100%;

		.left {
			width: 200rpx;
			height: 100%;
			background-color: #f7f7f7;
			box-sizing: border-box;
			padding-top: 10rpx;

			.title {
				font-size: 28rpx;
				color: #3333334d;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				padding: 20rpx;
				padding-right: 0rpx;
				padding-right: 0;
				position: relative;

				.price {
					.pricea {
						color: #3333334d;
						font-size: 28rpx;
						font-weight: 500;
					}

					.plus {
						width: 122rpx;
						height: 98rpx;
						position: absolute;
						top: 0rpx;
						right: 0;

						image {
							width: 122rpx;
							height: 98rpx;
						}
					}
				}
			}

			.active {
				font-size: 28rpx;
				color: #3333334d;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				padding: 20rpx;
				padding-right: 0rpx;
				position: relative;
				z-index: 8;

				.price {
					.pricea {
						color: #000000;
						font-size: 32rpx;
						font-weight: 700;
					}

					.plus {
						width: 122rpx;
						height: 98rpx;
						position: absolute;
						top: -4rpx;
						right: 15rpx;
						z-index: -1;

						image {
							width: 122rpx;
							height: 98rpx;
						}
					}
				}
			}
		}
	}

	.img {
		width: 300rpx;
		height: 200rpx;
	}
</style>